import { computed, defineComponent, ref } from 'vue';
import FabCard from './FabCard.vue';
import ImageGallery from './ImageGallery.vue';
import ImageStripHorizontal from './ImageStripHorizontal.vue';
import ImageStripVertical from './ImageStripVertical.vue';
import SameElement from './SameElement.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>FabCard</h5>
            <FabCard />
          </div>
          <div class='block-'>
            <h5 class='title'>ImageGallery</h5>
            <ImageGallery />
          </div>
          <div class='block-'>
            <h5 class='title'>ImageStripHorizontal</h5>
            <ImageStripHorizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>ImageStripVertical</h5>
            <ImageStripVertical />
          </div>
          <div class='block-'>
            <h5 class='title'>SameElement</h5>
            <SameElement />
          </div>
        </div>
      );
    };
  },
});
